<template>
    <section class="content">
        <Panel :expandable="false" :expand="true">
            <template slot="title">订单查询</template>
            <template slot="body">
                <el-form ref="form" label-width="100px" :model="this" :rules="rules">
                    <el-row>
                      <el-col :span="9">
                        <el-form-item label="日期范围" label-width="100px" prop="orderDate">
                          <el-date-picker
                            v-model="orderDate"
                            :type="datetimeType"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            class="full-cell"
                            :value-format="datetimeValueFormat"
                          >
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                        <el-col :span="10" style="padding-left: 12px; line-height:3;">
                          <el-radio-group v-model="orderType">
                            <el-radio :label="1">9610模式</el-radio>
                            <el-radio :label="0">非9610报关单模式</el-radio>
                            <!--<el-radio :label="2">非9610物流单模式</el-radio>-->
                          </el-radio-group>
                        </el-col>
                        <el-col :span="5" style="padding-left: 12px">
                            <el-button @click="handleSearch" type="success">筛选订单</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </template>
        </Panel>
        <Panel :expandable="false" :expand="true" :hasTitle="false">
            <template slot="body">
                <el-form label-width="70px">
                    <el-row :gutter="12">
                        <el-col :span="7">
                            <el-form-item label="订单编号">
                                <el-input v-model="orderNumber" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-button type="success" @click="handleSearchByOrderNumber">搜索</el-button>
                            <el-button type="primary" :disabled="buttondisabled" @click="handleCommit">申报备案</el-button>
                        </el-col>
                    </el-row>
                </el-form>

                <!--<el-table :data="subList" header-row-class-name="header-class">-->
                    <!--<el-table-column align="center" prop="orderCreated" label="平台"></el-table-column>-->
                    <!--<el-table-column label="店铺" align="center">-->
                      <!--<template slot-scope="scope">-->
                        <!--<span :style="{'color': scope.row.isInResult? 'red': ''}">{{scope.row.orderId}}</span>-->
                      <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column label="订单编号" align="center">-->
                      <!--<template slot-scope="scope">-->
                        <!--<span :style="{'color': scope.row.isInResult? 'red': ''}">{{scope.row.orderId}}</span>-->
                      <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column align="center" prop="total" label="订单日期"></el-table-column>-->
                    <!--<el-table-column align="center" prop="declareNo" label="支付流水号"></el-table-column>-->
                    <!--<el-table-column align="center" label="操作">-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button type="text" icon="iconfont rticon-shanchu" @click="handleDelete(scope.row)"></el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                <!--</el-table>-->

              <el-table
                :data="subList"
                style="width: 100%">
                <el-table-column
                  align="center"
                  prop="orderId"
                  label="订单编号">
                  <template slot-scope="scope">
                    <span :style="{'color': scope.row.isInResult? 'red': ''}">{{scope.row.orderId}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="orderCreated"
                  label="订单日期">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="baseNo"
                  label="物流单号/报关单号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="orderCreate"
                  label="申报类型">
                  <template slot-scope="scope">
                    <div class="order-type">
                      <span v-if="scope.row.orderType == 1">9610模式</span>
                      <span v-if="scope.row.orderType == 0">非9610报关单模式</span>
                      <span v-if="scope.row.orderType == 2">非9610物流单模式</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="address"
                  label="操作">
                  <template slot-scope="scope">
                    <div class="order-id-platform">
                      <!--<i class="el-icon-delete" style="color: #409EFF; height: 21px; width: 21px;" @click="handleDelete(scope.row)"></i>-->
                      <img style="width: 21px; height: 22px;" src="../../assets/delete_1.png" @click="handleDelete(scope.row)"/>
                    </div>
                  </template>
                </el-table-column>
              </el-table>

                <div class="clear-fix">
                    <el-pagination
                        style="float: right; margin-top: 20px;"
                        background
                        layout="total, prev, pager, next"
                        @current-change="handleCurrentChange"
                        @prev-click="handleCurrentChange"
                        @next-click="handleCurrentChange"
                        :current-page="searchParam.page"
                        :page-size="searchParam.rows"
                        :total="searchParam.total">
                    </el-pagination>
                </div>
            </template>
        </Panel>
    </section>
</template>
<script>
import Panel from '@/components/common/panel'
import instance from '@/api/index.js'
import apiUrls from '@/js/common/apiUrls'
import ClientPagination from '@/js/common/ClientPagination'
import {floatAdd, download, datetimeType, datetimeValueFormat} from '@/js/util'

export default {
    props: {declareType: String},
    name: "record",
    components: {
        Panel
    },
    data() {
        return {
            datetimeType: datetimeType,
            datetimeValueFormat: datetimeValueFormat,
            list: [],
            subList: [],
            deletedList: [],
            receiverNumber: "",
            orderDate: "",
            orderNumber: "",
            orderType: 1,
            searchParam: {
                page: 1,
                total: 0,
                rows: 10
            },
            shopList: [],
            applyTotalAmount: "",
            rules: {
                applyTotalAmount: [{
                    required: true,
                    type: "number",
                    message: "申报金额必填！",
                    trigger: "blur"
                }],

                // orderDate: [{
                //     required: true,
                //     message: "时间段是必填！",
                //     trigger: "blur"
                // }]
            },
          platformChannelsBtns: [],//平台渠道
          shopListBtn: [],
          searchPopshopListBtn:[],//店铺list
          selectedChannel: null,
          searchPopShop:null,//弹框店铺搜索
          skipOrderIds: [],
          buttondisabled: true,
        };
    },
    methods: {
        padding(n) {
            if(n < 10) {
                return "0" + n;
            } else {
                return "" + n;
            }
        },
        getDateStr(date) {
            if(date) {
                return date.getFullYear() + "-" + this.padding(date.getMonth()+1) + "-" + this.padding(date.getDate());
            }
        },

      handleDelete(item) {
        for(let i = 0; i < this.list.length; i++) {
          if(this.list[i].orderNo === item.orderNo) {
            this.list.splice(i, 1);
          }
        }

        for(let i = 0; i < this.subList.length; i++) {
          if(this.subList[i].orderNo === item.orderNo) {
            this.subList.splice(i, 1);
          }
        }

        this.deletedList.push(item.orderNo);

        if(this.searchParam.total - 1 <= (this.searchParam.page - 1) * this.searchParam.rows) {
          this.handleCurrentChange(this.searchParam.page - 1);
        } else {
          this.handleCurrentChange(this.searchParam.page);
        }
      },
      /*订单编号搜索*/
      handleSearchPlatformOrderId(){
        this.showTableList = []
        this.searchPopTableList.forEach((item,index)=>{
          if (item.platformOrderId == this.searchPopPlatformOrderId){
            this.showTableList.push(item);
            this.popTotalCount = 1;
            this.popCurrentPage = 1;
          }
        })
      },
      popSynchronousChannels() {
        let vm = this;
        if ( vm.selectedChannel == 0){
          vm.selectedChannel = null;
        }

        vm.searchPopshopListBtn = [];
        vm.searchPopshopListBtn.push({id:null,name:'全部'})
        instance({
          method: 'post',
          url: 'v1/author/getAuthorShopList',
          data: {
            id: vm.selectedChannel
          }
        }).then(function (data) {
          if (data.data.success) {
            let result = data.data.data;
            vm.searchPopshopListBtn = vm.searchPopshopListBtn.concat(result);
            if ( vm.selectedChannel == null){
              vm.selectedChannel = 0;
            }
          }
        })
      },
      /*获取9610列表*/
      getPopNine(){
        let self = this;
        let param  = {orderType:this.orderType}
        if(this.orderDate){
          this.orderDate.length > 1 ? Object.assign(param,{begin:this.orderDate[0],end:this.orderDate[1]}):'';
        // }else {
        //   this.$message.error('请选择日期');
        //   return
        }
        instance({
          method: 'post',
          url: '/v1/declare/search',
          data: param,
        }).then( (data)=> {
          if(data.data.success){
            // self.list = self.clientPagination.data = data.data.data;
            self.list = self.clientPagination.data = data.data.data.map((item)=>{
              for(let channel of self.platformChannelsBtns) {
                if (channel.id === item.channel) {
                  item.channel = channel.platformName;
                }
              }
              return item;
            });
            self.buttondisabled = self.list.length> 0? false: true;
            self.handleSearchByOrderNumber();
          }
          // console.log(data)
          // this.list = self.clientPagination.data = data.data;
          // this.searchPopTableList = result;
          // this.showTableList =  this.searchPopTableList.slice((this.popCurrentPage-1)*10,this.popCurrentPage*10);
          // this.popTotalCount = result.length;

        })
      },
      handleSearch(){
        this.popCurrentPage = 1;
        this.getPopNine();
      },
        handleSearch111() {
            let self = this;
            console.log("orderDate: ", this.orderDate);
            this.$refs.form.validate((valid)=>{
                if(valid) {
                    // this.begin = this.getDateStr(this.orderDate && this.orderDate[0]);
                    // this.end = this.getDateStr(this.orderDate && this.orderDate[1]);
                    this.begin = this.orderDate && this.orderDate[0];
                    this.end = this.orderDate && this.orderDate[1];
                    let param = Object.assign({
                        account: this.receiverNumber || null,
                        total: this.applyTotalAmount,
                        begin: this.begin || null,
                        end: this.end || null
                    });
                    self.deletedList = [];

                    instance({
                        method: 'post',
                        url: apiUrls.receive.declareOrderList,
                        params: param
                    }).then(function (data) {
                        if(data.data.success){
                            self.list = self.clientPagination.data = data.data.data;
                            self.handleSearchByOrderNumber();
                        }
                    }).catch(function (err) {
                        console.log(err)
                    });
                }
            });

        },

        handleSearchByOrderNumber() {
            let orderNumber = this.orderNumber;
            this.clientPagination.search((item)=>{
                return orderNumber != "" && item.orderId.toLowerCase().indexOf(orderNumber.toLowerCase()) > -1;
            });
            this.searchParam.page = 1;
            this.subList = this.clientPagination.subList;
            this.searchParam.total = this.clientPagination.searchParam.total;
        },

        handleDelete(item) {
            this.clientPagination.handleDelete(item);
            this.subList = this.clientPagination.subList;
            this.searchParam.total = this.clientPagination.searchParam.total;
            this.skipOrderIds.push(item.orderId);
        },

        handleCurrentChange(pageIndex) {
            this.searchParam.page = pageIndex;

            this.clientPagination.handleCurrentChange(pageIndex);
            this.subList = this.clientPagination.subList;
            this.searchParam.total = this.clientPagination.searchParam.total;
        },

        getCurrentDateStr() {
            let now = new Date();
            return now.getFullYear() + this.padding(now.getMonth()+1) + this.padding(now.getDate()) + this.padding(now.getHours()) + this.padding(now.getMinutes());
        },

        // 提交审核
        handleCommit() {
            let self = this;
            let param = {
                // declareType: this.declareType === "first"? 1: 2,
                orderType: this.orderType,
                // begin: this.begin,
                // end: this.end,
                // total: this.applyTotalAmount,
                // orderNos: this.clientPagination.deletedList.map((d)=>{return d.orderNo;})
                // skipOrderIds: this.list.map((d)=>{return d.orderId;})
                skipOrderIds: this.skipOrderIds
            };
            console.log(param)
            if(this.orderDate){
              this.orderDate.length > 1 ? Object.assign(param,{begin:this.orderDate[0],end:this.orderDate[1]}):'';
            // }else {
            //     this.$message.error('请选择日期');
            //     return
            }
            instance({
                method: 'post',
                url: "/v1/declare/record",
                data: param
            }).then(function (data) {
                if(data.data.success){
                    self.$emit('commited', data.data.msg);
                } else {
                    // 失败
                }
            }).catch(function (err) {
                console.log(err)
                // self.$emit('commited');
            });
        },

        // 获取店铺
        // getShopList(cb) {
        //     let self = this;
        //     let param = {
        //             id: "0"
        //         };
        //         instance({
        //             method: 'post',
        //             url: apiUrls.receive.shopList,
        //             data: param
        //         }).then(function (data) {
        //             self.shopList = data.data.data || [];
        //             if(data && data.data && data.data.data && data.data.data.length > 0) {
        //                 let shops = {};
        //                 data.data.data.forEach(function(s) {
        //                     let accounts = s.accounts;
        //                     accounts && accounts.forEach(function(a) {
        //                         shops[a] = a;
        //                     });
        //                 });
        //                 let arrShops = [];
        //                 for(let s in shops) {
        //                     arrShops.push(s);
        //                 }
        //                 self.shopList = arrShops;
        //                 self.receiverNumber = arrShops[0];
        //                 // self.handleSearch();
        //             } else {
        //                 self.$error("授权店铺列表为空");
        //             }
        //         }).catch(function (err) {
        //             console.log(err)
        //         });
        // },
      //获取平台列表
      getPlatform: function () {
        let vm = this;
        vm.platformChannelsBtns = [];
        vm.platformChannelsBtns.push({id:0,platformName:'全部'})
        instance({
          method: 'post',
          url: '/v1/author/getPlatFrom'
        }).then(function (data) {
          if (data.data.success) {
            let result = data.data.data;
            vm.platformChannelsBtns = vm.platformChannelsBtns.concat(result);
          }
        })
      },

      //获取店铺账号列表
      getShopList: function () {
        let vm = this;
        var id = null;
        if (vm.selectedChannel) {
          id = vm.selectedChannel;
        }
        instance({
          method: 'post',
          url: 'v1/author/getAuthorShopList',
          data: {
            id: id
          }
        }).then(function (data) {
          if (data.data.success) {
            vm.shopListBtn = data.data.data;
          }
        })
      },

    },
    created() {
        this.clientPagination = new ClientPagination();
        this.clientPagination.rows = this.searchParam.rows;
        this.getPlatform();
        this.getShopList();
    }
}
</script>
<style scoped>
.el-date-editor {
    width: 100%;
}

.el-range-separator {
    width: 22px!important;
}
</style>
